<template>
  <div class="share">
    <div class="btn_close" @click="closePage"></div>
    <div class="con_pic" ref="con_pic">
      <img class="bg_pic" src="../assets/images/share.jpg" width="100%" height="100%" />
      <div class="con_qrcode">
        <div class="qrcode" ref="qrcode"></div>
        <div class="logo_zfb"></div>
        <div class="shadow"></div>
      </div>
    </div>
    <img :src="imgsrc" class="mkpic" />
    <div class="tip"></div>
  </div>
</template>

<script>
import Qs from "qs";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";

export default {
  name: "share",
  metaInfo() {
    return {
      meta: [
        {
          name: "Alipay:link",
          content: `${this.home}?shareId=${this.shareId}`, //支付宝app右上角分享也携带参数
        },
      ],
    };
  },
  data() {
    return {
      loading: {}, //加载中
      imgsrc: null,
      shareId: "",
      home: "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/index.html",
    };
  },
  methods: {
    // 关闭分享页
    closePage() {
      this.$router.go(-1);
    },

    // 生成二维码
    qrcode(fn) {
      const width = this.$refs.qrcode.offsetWidth,
        height = this.$refs.qrcode.offsetHeight;

      const url = `${this.home}?shareId=${this.shareId}`;
      new QRCode(this.$refs.qrcode, {
        text: url,
        width: width,
        height: height,
        colorDark: "#003179", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
      fn && fn();
    },

    // 生成base64再转png
    picSave() {
      const tar = this.$refs.con_pic,
        width = tar.offsetWidth,
        height = tar.offsetHeight;
      html2canvas(tar, {
        useCORS: true,
        x: tar.getBoundingClientRect().left + 1,
        backgroundColor: null, // 解决生成的图片有白边，只单单加和这个并没有效果
        width: width - 1, // 因为多出的需要剪裁掉，
        height: height,
      }).then((canvas) => {
        const dataURL = canvas.toDataURL("image/png");
        this.getpic(dataURL);
      });
    },

    // 压缩png
    getpic(img) {
      const url =
        "//upc.pcauto.com.cn/upload_quick_base64.jsp?referer=http://play10.pcauto.com.cn/";
      // "/api/upload_quick_base64.jsp?referer=http://play10.pcauto.com.cn/"; // 因为跨域，用proxy代理,本地可用;
      this.$http({
        method: "post",
        url: url,
        data: Qs.stringify({
          application: "play",
          readExif: "yes",
          keepSrc: "yes",
          data: img,
        }),
      })
        .then((data) => {
          if (data.status == 200) {
            this.imgsrc = data.data.files[0].url;
            console.log(this.imgsrc);
            let _this = this;
            setTimeout(() => {
              _this.loading.clear();
            }, 1000);
          } else {
            this.loading.clear();
            this.$toast("生成图片失败");
          }
        })
        .catch((err) => {
          this.loading.clear();
          this.$toast("网络不佳，请稍后重试");
          console.log(err);
        });
    },
  },

  mounted() {
    this.shareId = this.$route.params.id;

    console.log(this.$route.params.id);
    this.loading = this.$toast.loading({
      message: "图片生成中...",
      duration: 0, // 无限时长loading
    });
    this.qrcode(this.picSave);
  },
};
</script>

<style lang="scss">
.share {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  margin: 0 auto;
  height: 100%;
  width: 7.5rem;
  padding: 0.9rem 0 1rem;
  position: relative;
  background: #181818;
  .btn_close {
    position: absolute;
    z-index: 10;
    background: url(../assets/images/page_close.png) no-repeat 0 0 / contain;
    width: 0.52rem;
    height: 0.52rem;
    right: 0.48rem;
    top: 0.2rem;
    display: block;
  }
  .con_pic {
    width: 6.5rem;
    height: 9.8rem;
    margin: 0 auto;
    .con_qrcode {
      width: 1.5rem;
      height: 1.5rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 7.8rem;
      background: #fff;
      padding: 0.05rem;
      box-sizing: border-box;
      .shadow {
        z-index: 9;
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 45%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(5, 171, 241, 0.2);
        box-shadow: 0 0 0.6rem rgba(5, 171, 241, 0.6);
        content: "";
      }
      .qrcode {
        width: 1.41rem;
        height: 1.41rem;
      }
    }
    .logo_zfb {
      z-index: 10;
      width: 0.28rem;
      height: 0.28rem;
      border-radius: 50%;
      border: 1px solid #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url(../assets/images/zfb_logo.png) no-repeat 0 0 / contain;
    }
  }
  .mkpic {
    width: 6.5rem;
    height: 9.8rem;
    position: absolute;
    top: 0.9rem;
    left: 50%;
    margin-left: -3.25rem;
    z-index: 999;
    border: 0;
    outline: 0;
    -webkit-touch-callout: none;
  }
  .tip {
    background: url(../assets/images/page_tip.jpg) no-repeat center top/contain;
    width: 6.48rem;
    height: 1.26rem;
    margin: 0 auto;
  }
}
</style>
